<template>
  <el-tabs v-model="activeTabName" @tabChange="tabChangeHandle">
    <el-tab-pane label="个人卡" name="custom"/>
    <el-tab-pane label="客户卡" name="company"/>
    <el-tab-pane label="客户卡(已退)" name="companyReturn"/>
    <el-tab-pane label="个人卡(用过的)" name="customReturn"/>
  </el-tabs>
  <div class="heard-search">
    <el-form ref="formRef" :model="queryParam" :inline="true">
      <el-form-item label="中介编号">
        <el-input v-model="queryParam.telephoneBalance" placeholder="中介编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="编码名称">
        <el-input v-model="queryParam.indexId" placeholder="编码名称" style="width: 180px" clearable></el-input>
      </el-form-item>
      <el-form-item label="编码备注">
        <el-input v-model="queryParam.indexIdMemo" placeholder="编码名称备注" style="width: 180px" clearable></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phoneNo" style="width: 200px">
        <el-input v-model="queryParam.phoneNo" placeholder="手机号码模糊搜索" clearable></el-input>
      </el-form-item>
      <el-form-item label="运营商">
        <el-select v-model="queryParam.operatorName" placeholder="请选择" style="width: 100px" clearable>
          <el-option v-for="item in getEnumBySn('operatorName')" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
<!--      <el-form-item label="卡类型">-->
<!--        <el-select v-model="queryParam.phoneType" placeholder="请选择" style="width: 100px" clearable>-->
<!--          <el-option v-for="item in getEnumBySn('phoneType')" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item label="手机卡户头">
        <el-input v-model="queryParam.cardAccount" placeholder="手机卡户头" clearable></el-input>
      </el-form-item>
<!--      <el-form-item label="话费余额下限">-->
<!--        <el-input-number v-model="queryParam.telephoneBalance" placeholder="话费余额下限" clearable></el-input-number>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="doSearch">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="main-body">

    <div class="pl-50">
      <el-button style="font-size: 20px" type="warning" @click="openUseMemo">使用说明</el-button>
      总数：{{ total }}
      <el-button style="font-size: 20px" type="danger" @click="openPhoneCardListWarn">待处理名单</el-button>
      <el-button style="font-size: 20px" type="primary" @click="manPhoneCard">男托管手机贴</el-button>
      <el-button style="font-size: 20px" type="warning" @click="womanPhoneCard">女托管手机贴</el-button>
<!--      <el-button style="font-size: 20px" type="primary" @click="openPhoneCardListManXs">男协商手机贴</el-button>-->
<!--      <el-button style="font-size: 20px" type="warning" @click="openPhoneCardListWomanXs">女协商手机贴</el-button>-->
      <el-button style="width: 200px;font-size: 20px" type="success" @click="addAgency">新增</el-button>
    </div>

    <el-table :data="data" border height="750px" @cell-dblclick="showUseOrderList" show-overflow-tooltip>
      <el-table-column label="序号"  width="60" align="center">
        <template #default="{ $index }">
          {{ $index + 1 }} <!-- 使用 $index 计算序号 -->
        </template>
      </el-table-column>

      <el-table-column label="手机卡户头" prop="cardAccount" width="110" align="center"/>
      <el-table-column label="排序" prop="orderNumber" width="90" sortable align="center"/>
      <el-table-column label="订单使用数量" prop="useNumber" width="80" align="center"/>
      <el-table-column label="协商使用数量" prop="negotiateUseNumber" width="80" align="center"/>
      <el-table-column label="解冻使用数量" prop="thrawUseNumber" width="80" align="center"/>
      <el-table-column label="中介编号" prop="telephoneBalance" width="100" align="center" />
      <el-table-column label="编码名称" prop="indexId" width="220" >
        <template #default="{ row }">
          <div :style="{ backgroundColor:  row.indexIdColor }">
            {{ row.indexId }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="编码备注" prop="indexIdMemo" width="220" align="center" :show-overflow-tooltip="true"/>
      <el-table-column label="手机号码" prop="phoneNo" width="140" align="center">
        <template #default="{ row }">
          <div :style="{ backgroundColor:  row.phoneNoColor }">
            {{ row.phoneNo }}
          </div>
        </template>
      </el-table-column>

<!--                       :filters="[-->
<!--                                    { text: '处理中', value: '处理中' },-->
<!--                                    { text: '暂停(有群)', value: '暂停(有群)' }-->
<!--                                  ]"-->
<!--                       :filter-method="filterTag"-->
<!--                       filter-placement="bottom-end"-->


      <el-table-column label="运营商" prop="operatorName" width="100" align="center"/>
      <el-table-column label="卡类型" prop="phoneType" width="100" align="center"/>
      <el-table-column label="操作" align="center" width="180">
        <template #default="scope">
          <el-button @click="bianji(scope.row)">编辑</el-button>

          <el-button type="danger" @click="deleteItem(scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="备注1" prop="memo" width="180" align="center" />
      <el-table-column label="备注2" prop="telephoneTraffic" width="100" align="center" />
      <el-table-column label="备注3" prop="telephoneMinutes" width="100" align="center" />
      <el-table-column label="月租" prop="telephoneRent" width="100" align="center" />
      <el-table-column label="办理时间" prop="handleTime" width="140" align="center" />

    </el-table>
  </div>
  <UseMemo ref="useMemoRef"></UseMemo>
  <Modal ref="modalRef" @ok="select"></Modal>
  <UseOrderList ref="useOrderListRef"></UseOrderList>
  <PhoneCardModel ref="phoneCardModelRef"></PhoneCardModel>
  <SiglePhoneCardModel ref="showPhoneCardListRef"></SiglePhoneCardModel>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Modal from "./modal.vue"
import UseOrderList from "@/views/EnumList/EnumB/UseOrderList.vue";
import UseMemo from './UseMemo.vue'

const useMemoRef = ref(null)
const total = ref(0)
const formRef = ref(null)
const queryParam = ref({})
const data = ref([])
const item = ref({})
const useOrderListRef = ref()
const showPhoneCardListRef = ref()
import request from '@/config/axios'
import {getEnumBySn} from "@/api/enums";
import PhoneCardModel from "@/views/EnumList/EnumB/PhoneCardModel.vue";
import SiglePhoneCardModel from "@/views/EnumList/SiglePhoneCardModel.vue";
const doSearch = async function () {
  const response = await request.get({
    url: '/transferPhone/list',
    params: queryParam.value
  })
  data.value = response
  if (response && Array.isArray(response)) {
    total.value = response.reduce((accumulator, currentObject) => {
      console.log(accumulator);
      console.log(currentObject);
      const number = (typeof currentObject.useNumber === 'number') ? currentObject.useNumber : Number(currentObject.useNumber) || 0;
      return accumulator + number; // 累加每个对象的value属性，若value不存在则视为0
    }, 0);
  } else {
    total.value = 0; // 若response不存在或不是数组，则将总和设为0
  }
}
async function deleteItem(params) {
  ElMessageBox.alert('删除吗', '手机号码' + params.phoneNo, {
    confirmButtonText: 'OK',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    try {
      request.delete({
        url: "/transferPhone/delete",
        params: { id: params.id }
      }).then(() => {
        doSearch()
      })


    } catch (error) {
      throw error;
    } finally {

    }
  })

}

const modalRef = ref(null)
const phoneCardModelRef = ref()
const addAgency = function () {
  modalRef.value?.add()
}

const bianji = (row) => {
  modalRef.value?.bianji(row)
}

const select = function () {
  doSearch()
}

interface User {
  date: string
  name: string
  address: string
  tag: string
}

onMounted(() => {
  queryParam.value.phoneType = '自己卡'
  queryParam.value.phoneStatus = '正常'
  doSearch()
});

const activeTabName = ref('custom')
const tabChangeHandle  = function (tabName) {
  activeTabName.value = tabName
  if (tabName === 'company') {
    queryParam.value.phoneType = '客户卡'
    queryParam.value.phoneStatus = '正常'
  }else if (tabName === 'custom') {
    queryParam.value.phoneType = '自己卡'
    queryParam.value.phoneStatus = '正常'
  }else if (tabName === 'companyReturn') {
    queryParam.value.phoneType = '客户卡'
    queryParam.value.phoneStatus = '已归还客户'
  }else if (tabName === 'customReturn') {
    queryParam.value.phoneType = '自己卡'
    queryParam.value.phoneStatus = '已归还客户'
  }
  doSearch()
}

const showUseOrderList = function (row: any, column: any, cell: HTMLTableCellElement, event: Event) {
  console.log("column",column)

  if (column.property === 'useNumber') {
    useOrderListRef.value?.open(undefined, row)
  }

  if (column.property === 'negotiateUseNumber') {
    useOrderListRef.value?.open('XS', row)
  }

  if (column.property === 'thrawUseNumber') {
    useOrderListRef.value?.open('WH', row)
  }

  if (column.label === '编码名称') {
    console.log("---row---", row)
    showPhoneCardListRef.value?.open('', {'phoneId': row.id})
  }

}



const openUseMemo = function(){
  useMemoRef.value?.open()
}

const openPhoneCardListWarn = function () {
  phoneCardModelRef.value?.open("待处理", {orderNoStart: "0", orderNoEnd: "1"})
}

const manPhoneCard = function () {
  phoneCardModelRef.value?.open("男托管", {orderNoStart: "1", orderNoEnd: "2"})
}

const womanPhoneCard = function () {
  phoneCardModelRef.value?.open("女托管", {orderNoStart: "2", orderNoEnd: "3"})
}

const openPhoneCardListManXs = function () {
  phoneCardModelRef.value?.open("男协商", {orderNoStart: "3", orderNoEnd: "7"})
}

const openPhoneCardListWomanXs = function () {
  phoneCardModelRef.value?.open("女协商", {orderNoStart: "7", orderNoEnd: "11"})
}





</script>

<style scoped lang="scss">
.heard-search {
  margin: 10px 5px 0 10px;

  .el-input {
    --el-input-width: 220px;
  }
}
</style>
